<template>
  <el-header class="head-nav">

    <div class="custom-features">
      <div class="custom-feature">
        <i @click="$emit('onExpand')" :class="expanding ? 'el-icon-s-fold' : 'el-icon-s-unfold'" />
      </div>
      <div class="custom-feature">
        <span>{{ title }}</span>
      </div>
      <div class="custom-feature">
        <el-tag color="#84a9fe" size="small" effect="dark">{{ version }}</el-tag>
      </div>
    </div>

    <div class="opreators">

      <div class="opreator full-screen" @click="fullScreen">
        <i class="el-icon-full-screen" />
      </div>

      <el-dropdown class="opreator user" @command="onDropdownItemClick">
        <span>
          {{ username }}
          <i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown" @command="onDropdownItemClick">
          <el-dropdown-item command="goHome">首页</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </div>

  </el-header>
</template>

<script>
import { TOKEN_KEY } from '../../constants/conf';

export default {
  // func props: ['onExpand']
  props: ['username', 'title', 'version', 'expanding'],
  data () {
    return {
      fullScreenIng: false,
    };
  },
  methods: {
    fullScreen () {
      if (this.fullScreenIng) {
        document.exitFullscreen();
      } else {
        document.documentElement.requestFullscreen();
      }
      this.fullScreenIng = !this.fullScreenIng;
    },
    onDropdownItemClick (command) {
      switch (command) {
        case 'goHome':
          this.$router.replace('/');
          break;
        case 'logout':
          localStorage.setItem(TOKEN_KEY, '');
          this.$router.replace('/login');
          break;

        default:
          break;
      }
    },
  },
}
</script>

<style scoped>
  @import url('./index.css');
</style>
